<template>
  <view class="goodsBox">
    <view class="goodsList" v-for="item in list" :key="item.id">
      <image mode="aspectFill" class="goodsImage_new" :src="item.goodsImg" />

      <!-- <view class="Pic">
        <image mode="aspectFill" class="goodsImage" :src="item.goodsImg" />

        <view class="totalStockCount" v-if="item.totalStockCount == 0"
          >已售罄</view
        >
      </view> -->
      <view class="goodsInfo u-flex-m">
        <view class="goodsTop"
          ><view class="goodsName moreText">{{ item.name }}</view></view
        >
        <view class="goodsDescription">
          {{ item.goodsDescription }}
        </view>

        <view class="kucun"> 月銷10 </view>

        <view class="kucun" style="font-size: 17.442rpx"> 庫存10 </view>

        <view class="memberPrice">
          <view class="VIP">
            <img :src="'./static/demo/VIP.png'" alt="" />
          </view>
          <view class="money">$299.99</view>
        </view>
        <view class="bottomOperation">
          <view class="retailPrice"> $ 300 </view>
          <view class="rightButton" @tap.stop="onPopupButton(item)">
            选规格
            <!-- <button
              class="button products"
              @tap.stop="onPopupButton(item)"
              :style="[{ background: PrimaryColor }]"
            >
              选规格
            </button> -->
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  props: {
    list: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  computed: {
    ...mapState(["PrimaryColor"]),
  },
  data() {
    return {
      isPopup: false,
      specGoodsData: {},
    };
  },
  methods: {
    toDetails(item) {
      uni.navigateTo({
        url: "/pages/goods/detail?id=" + item.id,
      });
    },
    //打开规格--多规格/多属性
    onPopupButton(item) {
      this.specGoodsData = item;
      console.log(item, "specGoodsData");
      this.$emit("onOpenPopup", item);
    },
    //购物车减
    minus(e) {
      this.judgeLogin(() => {
        var addNumber = -1;
        // onUpdateToCart(e, addNumber,'',(res)=>{
        //     this.$emit('minus',res)
        // })
      });
    },
    //购物车加--单规格、属性
    plus(e) {},
  },
};
</script>

<style lang="scss" scoped>
.moreText {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.u-flex {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
}
.u-flex-m {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  overflow: hidden;
}
.goodsBox {
  .goodsList {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    padding: 30rpx 0;
    border-bottom: 1px solid #f5f5f5;
    box-sizing: border-box;
    transition: all 1s;
    -webkit-transition: all 1s;
    position: relative;
    .Pic {
      width: 160rpx;
      height: 160rpx;
      position: relative;
      .PromoteIcon {
        position: absolute;
        left: 0;
        top: 0;
        background: #fe461d;
        color: #fff;
        font-size: 20rpx;
        padding: 2rpx 10rpx;
        border-radius: 10rpx 0 10rpx 0;
      }
      .totalStockCount {
        position: absolute;
        left: 0;
        top: 0;
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        font-size: 24rpx;
        width: 160rpx;
        height: 160rpx;
        border-radius: 10rpx;
        z-index: 9;
        text-align: center;
        line-height: 160rpx;
      }
      .goodsImage {
        width: 160rpx;
        height: 160rpx;
        border-radius: 10rpx;
      }
    }
    .goodsInfo {
      margin-left: 20rpx;
      /* #ifndef APP-NVUE */
      display: flex;
      /* #endif */
      flex-direction: column;
      justify-content: space-between;
      .goodsTop {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: row;
        justify-content: flex-start;
      }
      .goodsName {
        font-size: 28rpx;
        font-weight: bold;
      }
      .goodsDescription {
        color: rgba(36, 118, 173, 1);
        font-size: 20.93rpx;
        line-height: 20.93rpx;
        margin-top: 10rpx;

        background: rgba(218, 234, 244, 0.75);
        font-family: "Microsoft Yi Baiti";
        border: 0.3px solid rgba(36, 118, 173, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        height: 31.395rpx;
        border-radius: 8.721rpx;

        width: 61.047rpx;
      }

      .kucun {
        font-family: "Microsoft Sans Serif";
        font-size: 20.93rpx;
        font-weight: 400;
        line-height: 20.93rpx;
        margin-top: 12rpx;
      }
      .goodsData {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: row;
        // margin-top: 8rpx;
        text {
          color: #666;
          font-size: 24rpx;
        }
        .monthlySales {
          margin-right: 20rpx;
        }
      }
      .bottomOperation {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: row;
        justify-content: space-between;
        // margin-top: 10rpx;
        align-items: center;
        .rightButton {
          // .button {
          //   background: #fe461d;
          //   color: #fff;
          //   font-weight: normal;
          //   padding: 0 12rpx;
          //   height: 44rpx;
          //   border-radius: 44rpx;
          //   text-align: center;
          //   line-height: 44rpx;
          //   font-size: 24rpx;
          // }
          width: 104.651rpx;
          height: 40.116rpx;
          border-radius: 17.442rpx;
          background: rgba(247, 154, 77, 1);

          display: flex;
          justify-content: center;
          align-items: center;
          font-family: "Microsoft YaHei";
          font-size: 17.442rpx;
          font-weight: 400;
          color: rgba(255, 255, 255, 1);
        }
      }
      .retailPrice {
        color: rgba(0, 0, 0, 1);
        font-family: "Microsoft PhagsPa";
        font-size: 34.884rpx;
      }
    }
  }
}
.PromoteText .word {
  font-size: 20rpx;
  color: #fe461d;
  border: 1rpx solid #fe461d;
  padding: 2rpx 8rpx;
  border-radius: 6rpx;
  display: inline-block;
}

.memberPrice {
  width: 122.093rpx;
  height: 34.884rpx;
  display: flex;
  align-items: center;

  .VIP {
    color: linear-gradient(
      332.18deg,
      #d9d9d9 20.91%,
      #f8ab6b 75.45%
    ) !important;
    font-family: "Microsoft PhagsPa";
    font-size: 17.442rpx;
    font-weight: 400;

    background: rgba(69, 69, 69, 1);

    width: 33.14rpx;
    align-items: center;
    display: flex;

    height: 20.93rpx;
    justify-content: center;
  }
}

.money {
  width: 87.209rpx;
  height: 20.93rpx;
  display: flex;
  background: linear-gradient(
    352.27deg,
    #ffffff -65.41%,
    #facaa2 14.99%,
    #f7ab6b 63.1%
  );

  font-family: "Abyssinica SIL";
  font-size: 15.698rpx;
  font-weight: 400;
  color: rgba(69, 69, 69, 1);
  padding-left: 5rpx;
  align-items: center;
}

.goodsImage_new {
  width: 160.465rpx;
  height: 144.767rpx;

  position: absolute;
  right: 0;
  top: 17.442rpx;
}
</style>
